<template>
  <div>
    <div class="myRelease">
      <!--<div class="wodeshoucang_table">-->
        <!--<span class="blue_m" @click="buils($event)">商品收藏</span>-->
        <!--<span @click="buils($event)">店铺收藏</span>-->
      <!--</div>-->
      <div class="sp_coll" v-show="listq">
        <div class="sp_coll_p" v-for="item in datas">
          <router-link :to="{path:'/Shopdetails',query: { id:item.gdId  }}"><img class="sp_coll_p_img" :src=myfilter(item.gdImg) />
          </router-link>
          <p>
            <span>{{item.gdName}}</span>
            <span style="color:red;">￥{{item.gdPrice}}</span>
          </p>
          <button :name="item.gdId" @click="goodsqx($event,item.gdId,userId)">取消收藏</button>
        </div>

      </div>

      <div class="sp_coll" v-show="!listq">
        <div class="sp_coll_pp" v-for="items in datasa">
          <img :src=myfilter(items.adShopLogo) />
          <p>
            {{items.adShopName}}

          </p>
          <router-link :to="{path:'/Details',query: { id:items.adExId}}">
            <button>进店逛逛</button>
          </router-link>
          <button :name="items.adExId" @click="goodsdp($event,items.adExId,userId)">取消收藏</button>
        </div>


      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        listq: true,
        datas: '',
        datasa: '',
        userId: ''
      }

    },
    methods: {
      parentMsg (msg) {
       console.log(msg)
      },
      goodsqx (e, gdId, userId) {
        console.log(gdId, userId)
        var ttda = $(e.currentTarget)
        $.ajax({
          type: 'GET',
          url: 'http://www.wutongsd.com/awm/deleteByUserIdFa.do?userId=' + userId + '&gdId=' + gdId,
          dataType: 'json',
          success: function (data) {
            console.log(data)
            if (data == 1) {
              ttda.parent().remove()
            }

          },
          error: function (aa) {
            console.log(aa)
          }
        })

      },
      goodsdp (e, adExId, userId) {
        console.log(adExId, userId)
        var ttdas = $(e.currentTarget)
        $.ajax({
          type: 'GET',
          url: 'http://www.wutongsd.com/awm/deleteByUserIdCo.do?userId=' + userId + '&adExId=' + adExId,
          dataType: 'json',
          success: function (data) {
            console.log(data)
            if (data == 1) {
              ttdas.parent().remove()
            }
          },
          error: function (aa) {
            console.log(aa)
          }
        })

      },
      myfilter (value) {
        return 'http://wut1.oss-cn-beijing.aliyuncs.com/' + value.split(';')[0]

      },
      click1: function (e) {
        $(e.currentTarget).addClass('activas').siblings().removeClass('activas')
        $('.atv_r li').eq($(e.currentTarget).index()).show().siblings().hide()
      },
      spanclick: function (e) {
        $(e.currentTarget).addClass('activas').siblings().removeClass('activas')
        $('.tot_listone').eq($(e.currentTarget).index()).show().siblings().hide()
      },
      buils (msg) {
        console.log(msg)
//        $(e.currentTarget).addClass('blue_m').siblings().removeClass('blue_m')
        if (msg == 0) {
          this.list_bulid(msg)
          this.listq = true
        } else if (msg == 1) {
          this.list_bulid(msg)
          this.listq = false
        }
      },
      list_bulid (index) {
        let userIds = sessionStorage.getItem('userId')
        if (index == 0) {
          var urlAl = 'http://www.wutongsd.com/awm/selectGoods.do?userId=' + userIds
        }
        else if (index == 1) {
          var urlAl = 'http://www.wutongsd.com/awm/selectCollectionShop.do?userId=' + userIds
        } else {
          var urlAl = 'http://www.wutongsd.com/awm/selectGoods.do?userId=' + userIds
        }
        let vam = this
        $.ajax({
          type: 'GET',
          url: urlAl,
          dataType: 'json',
          success: function (data) {
            console.log(data)
            if (index == 0) {
              vam.datas = data
            } else if (index == 1) {
              vam.datasa = data
            } else {
              vam.datas = data
            }
          },
          error: function (aa) {
            console.log(aa)
          }
        })
      }
    },
    mounted () {
      this.list_bulid(0)
      this.userId = sessionStorage.getItem('userId')
    },
    components: {
    }
  }
</script>

<style scoped>
  .myRelease {
    width: 100%;
    height: 498px;
    /*background: pink;*/
    position: relative;
  }
 /*.wodeshoucang_table {*/
    /*font-size: 18px;*/
    /*height: 40px;*/
    /*line-height: 40px;*/
    /*background: #f0f8ff;*/
    /*text-align: left;*/
    /*text-indent: 30px;*/
  /*}*/

  /*.blue_m {*/
    /*background: #ff8328;*/
  /*}*/

  /*.wodeshoucang_table span {*/
    /*display: block;*/
    /*width: 140px;*/
    /*height: 40px;*/
    /*float: left;*/
  /*}*/
  /*.wodeshoucang_table span:hover {*/
    /*cursor: pointer;*/
  /*}*/
   .sp_coll {
    width: 100%;
    height: 437px;
    overflow-y: auto;
  }

   .sp_coll .sp_coll_p {
    width: 100%;
    height: 72px;
    /*background:pink;*/
    margin: 40px 0;
  }

 .sp_coll .sp_coll_p .sp_coll_p_img {
    width: 70px;
    height: 70px;
    float: left;
    margin: 0 40px;
  }

   .sp_coll .sp_coll_p p {
    width: 590px;
    height: 70px;
    float: left;
  }

   .sp_coll .sp_coll_p button {
    float: left;
    width: 80px;
    height: 26px;
    margin: 24px 0 0 63px;
  }

   .sp_coll .sp_coll_p p span {
    display: block;
    width: 100%;
    height: 35px;
    text-align: left;
  }

  .sp_coll .sp_coll_pp {
    width: 100%;
    height: 72px;
    /*background:pink;*/
    margin: 40px 0;
  }

  .sp_coll .sp_coll_pp img {
    width: 123px;
    height: 70px;
    float: left;
    margin: 0 40px;
  }

.sp_coll .sp_coll_pp p {
    width: 370px;
    height: 70px;
    float: left;
    line-height: 70px;
    text-align: left;
    font-size: 20px;
  }

  .sp_coll .sp_coll_pp button {
    float: left;
    width: 80px;
    height: 26px;
    margin: 24px 0 0 63px;
  }
</style>
